<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>点击</div>
    <script>
        let div =document.querySelector('div')
        div.onclick=function(){
            console.log('点击事件');
            
        }
        div.onclick=function(){
            console.log('事件2');
            
        }
        //事件绑定方式，可以绑定多个事件，都可以触发
        // addEventListener(参数一，参数二，参数三)
        // 参数一:事件触发方式  不带on
        // 参数二:函数
        // 参数三:当前参数所处阶段
            // true:事件在捕获阶段
            // false:事件处于冒泡阶段   默认
        div.addEventListener('click',function(){
            console.log('add1');
            
        })
        div.addEventListener('click',function(){
            console.log('add2');
            
        })
        function add (){
            div.append('<p>插入</p>')
        }
        div.addEventListener('click',add)
        let button = document.querySelector("button")
        button.onclick=function(){
            // 移除div的点击事件
            // removeEventListener('移除的事件名称'，被移除的函数)
            div.removeEventListener('click',add)
        }
    </script>
</body>
</html>